<template>
  <el-card class="box-card">
    <!--面包屑导航区</h3>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">管理</el-breadcrumb-item>
<!--      <el-breadcrumb-item>用户管理</el-breadcrumb-item>-->
      <el-breadcrumb-item>日志列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--表格-->
    <el-table
        stripe
        :data="logList"
        border
        height="600px"
        style="width: 100%">
      <el-table-column width="60px" type="index"></el-table-column>
      <el-table-column align="center" prop="operation" label="操作类型" width="80"></el-table-column>
      <el-table-column align="center" prop="operateTime" label="操作时间" width="100">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.operateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operateTable" label="操作表" width="80">
        <template slot-scope="scope">
          <span>{{getTableName(scope.row.operateTable)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operateId" label="操作id" width="50"></el-table-column>
      <el-table-column align="left"  width="150">
        <template slot-scope="scope">
          <el-button type="info" @click="showParams(scope.row.operateParams)">操作参数详情</el-button>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="operateParams"
          label="操作参数"
          show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[15,20,30]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
    </el-pagination>
    <!--详情-->
    <el-dialog
        :visible.sync="showDialog"
        width="50%"
        @close="showDialog = false"
    >
      <el-descriptions title="操作参数" :column=1>
        <el-descriptions-item>{{showParamsStr}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </el-card>
</template>
<script>
  import axios from "axios";

  export default {
    name:'Log',
    components: {},
    data(){
      return{
        showDialog:false,
        showParamsStr:'',
        logList:[],
        //分页数据
        queryInfo: {
          query: '',
          pageNum: 1,
          pageSize: 15,
        },
        //总数
        total: 0,
        expandedRows: [] // 用于存储哪些行是展开的
      }
    },
    methods:{
      formatDate(dateTimeString) {
        const dateTime = new Date(dateTimeString);
        // 返回格式化后的日期时间字符串
        return dateTime.toISOString().slice(0, 19).replace('T', ' ');
      },
      async getLogsList(){
        const {data:res}=await axios.get(`/api/logs?pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`)
        if(res.code!==0)
          return this.$message.error(res.description||res.message);
        this.logList=res.data.rows;
        this.total = res.data.total;
      },
      //当前页显示条数改变
      handleSizeChange(val) {
        this.queryInfo.pageSize = val
        this.getLogsList()
      },
      //当前页数改变
      handleCurrentChange(val) {
        this.queryInfo.pageNum = val;
        this.getLogsList()
      },
      showParams(operateParams) {
        this.showDialog=true
        this.showParamsStr=operateParams
      },
      getTableName(operateTable){
        switch(operateTable){
          case 'users':
            return '用户表'
          case 'orders':
            return '订单表'
          case 'hotels':
            return '酒店表'
          case 'rooms':
            return '房间表'
        }
      }
    },
    created() {
      this.getLogsList()
    }
  }
</script>
<style scoped>
</style>